<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #ad,#as,#af
        {
            width: 200px;
            height: 200px;
            background-color: #58a;
            margin-top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function()
        {
            //需求1：点击div 2s后颜色变成粉色
            let ad=document.getElementById("ad");
            let as=document.getElementById("as");
            let af=document.getElementById("af");
            //常规方法，但是此方法会把代码写死
            ad.onclick=function()
            {
                let timer=setTimeout(function(){
                    ad.style.backgroundColor="pink";
                    console.log("div变为了粉色");
                },2000)
            };
            //使用this来代替被修改元素
            //注意：直接引用this，this会指向window，所以需要定义
            as.onclick=function()
            {
                let this_=this;//此处定义this，然后就会使得this指向as
                let timer=setTimeout(function(){
                    this_.style.backgroundColor="pink";
                    console.log("div变为了粉色");
                },2000)
            };
            //使用箭头函数来定义，若使用箭头函数定义，this可直接往上寻找this区域，最终停滞玉af
            af.onclick=function()
            {
                let timer=setTimeout(()=>{
                    this.style.backgroundColor="pink";
                    console.log("div变为了粉色");
                },2000)
            };

            //需求2：从数组中返回偶数的元素
            const arr=[1,6,9,10,25,100];
            /*
            const result=arr.filter(function(item){
                if(item%2===0)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            });
            */
            /*
            const result=arr.filter(item=>
            {
                if(item%2===0)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            });
            */
            const result=arr.filter(item=>item%2===0);
            console.log(result);

            //箭头函数适合于this无关回调：定时器，数组的方法回调
            //箭头函数不适合于this有关的回调
            {
                getName:()=>{
                    this.name;//在没有特别定义的情况下，箭头函数的this默认指向window
                }
            }
        };
    </script>
</head>
<body>
    <div id="ad"></div>
    <div id="as"></div>
    <div id="af"></div>
</body>
</html>